import React, { Component } from 'react'
import './05.css';

//生成随机颜色
function generateRandomColor() {
  // 控制红、绿和蓝的取值范围（120-230之间）
  var red = Math.floor(Math.random() * 111) + 120; // 120 到 230 之间的随机整数
  var green = Math.floor(Math.random() * 111) + 120;
  var blue = Math.floor(Math.random() * 111) + 120;

  // 将 RGB 值转换为十六进制表示
  var hexRed = red.toString(16).padStart(2, '0');
  var hexGreen = green.toString(16).padStart(2, '0');
  var hexBlue = blue.toString(16).padStart(2, '0');

  // 返回随机生成的颜色
  return '#' + hexRed + hexGreen + hexBlue;
}


export default class StateBg extends Component {
  // 1. 声明状态
  state = {
    // 谁变化, 就将谁定义为状态
    color: '#cef'
  }
  render() {
    return (
      // 2. 使用状态
      <div className='box' style={{background: this.state.color}}
        onClick={this.changeBg}
      ></div>
    )
  }

  //3. 声明事件回调
  changeBg = () => {
    //更新状态
    this.setState({
      color: generateRandomColor()
    })
  }
}
